<!--
 * @Description: 
 * @Author: 胡涛
 * @Date: 2023-12-03 11:01:32
 * @LastEditors: 胡涛
 * @LastEditTime: 2023-12-09 22:58:39
-->
<template>
  <a-modal
    :open="visible"
    :keyboard="false"
    :maskClosable="false"
    title="组件配置"
    @cancel="onCancel"
    @ok="onSuccess"
    :width="800"
  >
    <a-form ref="formRef" v-bind="formLayout">
      <a-form-item label="组件名">
        <a-input v-model:value="config.name"></a-input>
      </a-form-item>
      <a-form-item label="组件属性">
        <div class="script-editor">
          <monaco-editor
            :height="250"
            language="json"
            v-model:value="controlProps"
          />
        </div>
      </a-form-item>
      <a-form-item label="Class样式">
        <a-input v-model:value="config.className"></a-input>
      </a-form-item>
      <a-form-item label="Style样式">
        <div class="script-editor">
          <monaco-editor
            :height="150"
            language="json"
            v-model:value="controlStyles"
          />
        </div>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script lang="ts" setup>
import { ComponentOptions } from "@/api/report/types";
import { ref, onMounted } from "vue";

interface IConfigComponentProps {
  visible: boolean;
  config: ComponentOptions;
}

const props = defineProps<IConfigComponentProps>();
const emits = defineEmits(["close", "success", "update:visible"]);

const controlProps = ref<string>("{}");
const controlStyles = ref<string>("{}");

/**
 * 表单布局方式
 */
const formLayout = {
  labelCol: { span: 3 },
  labelAlign: "right",
  wrapperCol: { span: 20 },
};

const onSuccess = () => {
  setTimeout(() => {
    props.config.props = JSON.parse(controlProps.value);
    props.config.styles = JSON.parse(controlStyles.value);
    emits("success");
    emits("close");
    emits("update:visible", false);
  }, 200);
};

const onCancel = () => {
  emits("close");
  emits("update:visible", false);
};

onMounted(() => {
  controlProps.value = JSON.stringify(props.config.props || {}, null, 4);
  controlStyles.value = JSON.stringify(props.config.styles || {}, null, 4);
});
</script>

<style lang="less" scoped></style>
